<template>
  <div class="home" v-wechat="$route.meta.title">
    <Search class="Search" @searchCall='searchCall' :disabledBool='disabledBool' @input="inpuhandle"></Search>
      <header class="home-header">
          <home-nav 
            :achievementsData='$store.state.addTypeList' 
            :regionType='$store.state.regionType'
            :statType='$store.state.statType'
            :statTypeDetail="$store.state.statTypeDetail"
            :serviceArr ='serviceArr'
            @achievementsCall='achievementsCall'
            @reset='reset'
        ></home-nav>
      </header>
      <main class="main" ref="scroll">
        <div  v-if="listData.length ">
          <p class="main_total" >{{ common ? `${$t('lackMsg.gong') + '&nbsp;&nbsp;' + total} ` : `${$t('lackMsg.gong') + total + $t('lackMsg.tiao')} `}}</p >
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :loading-text="$t('lackMsg.jzh')" :loosing-text="$t('lackMsg.sfsx')">
            <van-list
              v-model="loading"
              :finished="finished"
              :error-text="qqsb"
              :finished-text="mygd"
              :loading-text="$t('lackMsg.jzh')"
              @load="onLoad"
            >
              <div>
                  <van-cell v-for="(item,index) in listData" :key="index" class="vanCell">
                    <home-list :listDataObj="item"  @revokeBtn ='revoke' @handerDelete='del' @popUpCall='popUpCall'/>
                  </van-cell>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>

        <div v-if="Nodata " class="Nodata">
          <div class="img">
              <img src="../assets/images/zwsj.png" alt="" class="mian-image">
          </div>
          <div class="zwsj">{{$t('message.zwsj')}}</div>
        </div>


      </main>
      <footer class="home-footer">
        <van-button  round block color="linear-gradient(to right, #FFB301, #FE8C01)" @click="homeBtn(listData)">{{$t('message.xinjian')}}</van-button>
      </footer>
      <van-popup v-model="show" class="popup">
        <div style='overflow-y: auto; max-height: 40%;'>
          <van-steps direction="vertical" :active="0" active-color='#FE8B01' >
            <van-step v-for="(item,index) in popupData" :key="index">
              <h3 style="color: #666666">{{item.approvalStatus}}</h3>
              <p style="color: #666666; paddingTop: 5px">{{item.approvalComments}}</p>  
              <p style="color: #666666; paddingTop: 5px">{{item.operationBy}}</p>  
              <p style="color: #666666; paddingTop: 5px">{{item.createTime}}</p>
            </van-step>
          </van-steps>
        </div>
        
        <div v-if=" !popupData.length" class="popupdata">
            <h3 style="color: #666666">{{$t('message.zwsj')}}</h3>
        </div>
        <div class="popupbutton">
           <button round  class="popupbtn" @click="close">{{$t('message.gb')}}</button>
        </div>
      </van-popup>

      <van-popup v-model="show1" class="popup">
        <div style='overflow-y: auto; max-height: 40%;'>
          <van-steps direction="vertical" :active="0" active-color='#FE8B01' >
            <van-step v-for="(item,index) in popupData1" :key="index">
              <h3 style="color: #666666">{{item.trackCount}}</h3>
              <p style="color: #666666; paddingTop: 5px">{{item.trackStatus}}</p>
              <p style="color: #666666; paddingTop: 5px">{{item.trackComments}}</p>
               <p style="color: #666666; paddingTop: 5px">{{item.operationBy}}</p>
              <p style="color: #666666; paddingTop: 5px">{{item.createTime}}</p>
               
            </van-step>
          </van-steps>
        </div>
        
        <div v-if=" !popupData1.length" class="popupdata">
            <h3 style="color: #666666">{{$t('message.zwsj')}}</h3>
        </div>
        <div class="popupbutton">
           <button round  class="popupbtn" @click="close1">{{$t('message.gb')}}</button>
        </div>
      </van-popup>

  </div>
</template>

<script>
// @ is an alias to /src
import Navbar from "@/components/NavBar"
import HomeNav from '@/components/HomeNav'
import HomeList from '@/components/List'
import Search from '@/components/search'
import buried from "@/utils/buried";
import {Toast} from 'vant'
import Cookies from 'js-cookie'
export default {
  name: "Home",
  components: {
    Navbar,
    HomeNav,
    HomeList,
    Search
  },
  data() {
    return {
      pageNo:0,
      pageSize:10,
      count:null,
      listData: [],
      Nodata: false,
      isLoading:false,
      loading: false,
      finished: false,
      refreshing: false,
      error: false,
      disabledBool: true,
      serviceArr: [],
      common: Cookies.get('site_lang') === 'en-US' ,
      show: false,
      show1: false,
      popupData: [],
      popupData1: [],
      total: 0,
      show: false,
      mygd: this.$t('lackMsg.mygd'),
      qqsb: this.$t('lackMsg.qqsb'),
      from: {
        businessType: '',
        fieldTwo:'',
        border: '',
        approvalStatus: '',
        titleCn: '',
      }
    };
  },
  mounted() {
    buried("M_result_home", "M_home_pv");
    this.pageNo = 1;
    this.getList({pageNo: this.pageNo});
    this.serviceArr = this.$store.state.serviceList;
  },
  computed: {
    serviceList() {
       return this.$store.state.serviceList;
     },
  },
  watch: {
    serviceList (val) {
      this.serviceArr = val;
    }
  },
  methods: {
    popUpCall(query) {
      if( query.baseCode === 'RELEASE') {
        if(query.auditClassification == 0) {
            this.$axios.get('/api/releaseResultLog/getRecords', { id : query.id }).then((res) => {
            if(res.data.code == 200) {
                this.popupData = res.data.data;
                this.show = true
            }
          })
        }else {
            this.$axios.get('/api/releaseResultTrack/getRecords', { id : query.id }).then((res) => {
            if(res.data.code == 200) {
                this.popupData1 = res.data.data;
                this.show1 = true
            }
          })
        }
      }else {
        if(query.auditClassification == 0 ) {
           this.$axios.get('/api/contractApprovalLog/getAuditRecord', { id : query.id }).then((res) => {
            if(res.data.code == 200) {
                this.popupData = res.data.data;
                this.show = true
            }
          })
        } else {
           this.$axios.get('/api/contractTrack/getRecords', { id : query.id }).then((res) => {
            if(res.data.code == 200) {
                this.popupData1 = res.data.data;
                this.show1 = true
            }
          })
        }
      }
    },
    close() {
      this.show = false;
    },
     close1() {
      this.show1 = false;
    },
    //点击搜索
    searchCall(value) {
      this.pageNo = 1
      this.$refs.scroll.scrollTop = 0
      this.mygd =  this.$t('lackMsg.mygd')
      this.getList({...this.from, pageNo : this.pageNo})
    },
    inpuhandle(val) {
      this.from.titleCn = val;
      if(val === '') {
        this.pageNo = 1
        this.$refs.scroll.scrollTop = 0
        this.getList({...this.from ,pageNo : this.pageNo})
      }
    },
     /**
     * 点击新建按钮跳转到新建页面
     */
    homeBtn(list) {
      this.$router.push('/addPage')
    },
    /**成果类型下拉选项每一项点击事件*/
    achievementsCall({value, type}) {
      this.mygd =  this.$t('lackMsg.mygd')
      this.$refs.scroll.scrollTop = 0
      this.pageNo = 1
      this.from[type] = value;
      this.getList({...this.from, pageNo: this.pageNo})
    },
    // 重置按钮
    reset({num, type}) {
      this.pageNo = 1
      this.mygd = this.$t('lackMsg.mygd')
      this.from = {
        ...this.from,
        [type]: ''
      }
      this.$refs.scroll.scrollTop = 0
      this.getList({...this.from, pageNo: this.pageNo, pageSize: 10})
    },
    /*** 首页列表请求接口分页分页*/
     getList(obj) {
       let that = this
       let params = {
          pageSize: this.pageSize,
          ...obj,
       }
      this.$axios.post("/api/contract/pageListBusiness", params).then(res => {
        if(res.data.code === 200) {
          that.listData=res.data.data;
          that.total = res.data.count;
          that.isLoading = false;
          this._params = params
          that.listData.length !== 0 ? this.Nodata = false : this.Nodata = true
          if (that.listData.length >= that.total) {
            that.finished = true;
          }else {
            that.finished = false;
          }
        }
      });
    },
    /** * 上拉加载下拉刷新*/
     onLoad() { 
      this.pageNo++
      let that = this
      const params = {
        ...this._params,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }
      this.$axios.post("/api/contract/pageListBusiness", params).then(res => {
        if(res.data.code === 200) {
            that.data1=res.data.data;
            that.total = res.data.count
            that.data1.forEach( item =>{
              that.listData.push(item)
            })
            // 加载状态结束
            this.loading = false;
            // this._params = params
            // 数据全部加载完成
            this.listData.length !== 0 ? this.Nodata = false : this.Nodata = true 
            if (this.listData.length >= that.total) {
              this.finished = true;
              this._params = {}
            }
        } 
        else {
          this.finished = true;
          this.mygd = this.$t('message.zwsj')
        }
      });
    },
     onRefresh() {
       setTimeout(() => {
        this.pageNo = 1
        this.isLoading = false;
        this.getList({...this.from, pageNo: this.pageNo})
        // this.$toast('刷新成功');  //弹出
      }, 500);
        
    },
    revoke(query) {
         if (query.baseCode === 'RELEASE') {  // 成果
         this.$dialog.confirm({
              confirmButtonColor: "#FE8D01",
               title: this.$t('message.ts'),
              message: this.$t('message.ts1'),
              // type: "warning"
            }).then(res => {
                // 审核通过 - 重新审核
                    this.$axios.get('/api/releaseResult/revokeApproval', {
                      businessId: query.id,
                      businessType: ['RELSULT', 'RELSULT_TRACK'][query.auditClassification]
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.$toast(res.data.message)
                            this.pageNo = 1
                            this.getList({...this._params, pageNo : this.pageNo})
                        } else {
                        // 失败
                        this.$toast(res.data.message)
                    }
                })
            }).catch(() => {
              // on cancel
        }); 
      } else {  // 合同
         this.$dialog.confirm({
              title: this.$t('message.ts'),
              message: this.$t('message.ts1'),
              confirmButtonColor: "#FE8D01",
              // type: "warning"
            }).then(res => {
              if (res === 'confirm') {
                // 审核通过 - 重新审核
                this.$axios.get('/api/releaseResult/revokeApproval', {
                  businessId: query.id,
                  businessType: ['CONTRACT', 'CONTRACT_TRACK'][query.auditClassification]
                }).then(res => {
                  // console.log('CONTRACT', res)
                    if (res.data.code === 200) {
                        this.$toast(res.data.message)
                        this.pageNo = 1
                        this.getList({...this._params, pageNo : this.pageNo})
                    } else {
                        // 失败
                        this.$toast(res.data.message)
                    }
                })
              }
            }).catch(() => {
              // on cancel
        }); 
      }
    },
    del(query) {
      if(query.baseCode === 'RELEASE') {
        this.$dialog.confirm( {
          confirmButtonColor: "#FE8D01",
          title: this.$t('message.ts'),
          message: this.$t('message.p-sfsccgtj')
        }).then(res => {
          if (res === 'confirm') {
            this.$axios.get('/api/releaseResult/deleteReleaseResult',{
              id: query.id
            }).then(res => {
                if (res.data.code === 200) {
                    // chengg
                      this.$toast(res.data.message)
                      this.pageNo = 1
                      this.getList({...this._params, pageNo : this.pageNo})
                } else {
                    // 失败
                      this.$toast(res.data.message)
                }
            })
          }
        }).catch(() => {
              // on cancel
        }); 
      }else {
        this.$dialog.confirm( {
          confirmButtonColor: "#FE8D01",
          title: this.$t('message.ts'),
          message: this.$t('message.p-sfsccgtj'),
        }).then(res => {
          if (res === 'confirm') {
            this.$axios.get('/api/contract/deleteContract',{
              id: query.id
            }).then(res => {
                if (res.data.code === 200) {
                    // 成功
                      this.pageNo = 1
                      this.$toast(res.data.message)
                      this.getList({...this._params, pageNo : this.pageNo})
                } else {
                    // 失败
                      this.$toast(res.data.message)
                }
            })
          }
        }).catch(() => {
              // on cancel
        }); 
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.Nodata {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  .img {
    width: 50%;
    .mian-image{
      width: 100%;
      height: 100%;
    }
  }
  .zwsj {
    font-weight: 500;
    margin-top: 10px;
  }
}

.home {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  user-select: none;
  .main {
    flex: 1;
    overflow: auto;
    padding: 10px;
    .main_total{
      font-size: 14px;
      color: #333;
      padding: 10px;
    }
  }
  .home-footer {
    padding: 0 15px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
.vanCell {
  margin-bottom: 18px;
  border-radius: 10px;
  padding: 0;
}
.notYet {
  text-align: center;
  line-height: 100px;
  color: #969799
}
.popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 ::v-deep .van-popup--center {
  padding: 10px;
  border-radius: 8px;
  max-height: 50%;
  width: 60%;
  overflow-y: auto;
}
.popupdata {
  margin: 10px 0;
}
.popupbutton{
  width: 100%;
  height: 38px;
  margin: 14px 0 8px 0;
  text-align: center;
 
}
.popupbtn {
  width: 60%;
  height: 100%;
  background: none;
  border: 1px solid #ebedf0;
  border-radius: 20px;
  font-size: 14px;
}
</style>
